<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
	.content {
		width:800px;
		margin:0px auto;
	}
	.pagetitle {
		padding:10px;
		font-size:32pt;
		margin:30px;
		text-align:center;
	}
	.pagetitle:hover {
		transform:rotate(5deg);
	}
	
	label {
		display:block;
	}
	
	.formfield {
		margin:10px;
		padding:10px;
		font-family:sans-serif;
		font-size:10pt;
		color:black;
	}
	
	.formfield input {
		border:1px solid white;
		box-shadow:1px 1px 3px #000;
		padding:5px;
		height:25px;
		width:300px;
	}
	
	section.formfield:hover {
		background-color:#dde;
	}
	
	section.formfield.active {
		background-color:#ded;
	}
	
	/*.formfield:nth-child(even) {
		background-color:#abf;
	}
	.formfield:nth-child(odd) {
		background-color:#fab;
	}*/
	
	span.error {
		color:red;
		font-weight:900;
		display:none;
	}
</style>

<script src="jquery.min.js"></script>
<script>
$(function(){
	$(".formfield input").focusin(function(){
		$(this).parent().addClass("active");
	});
	$(".formfield input").focusout(function(){
		$(this).parent().removeClass("active");
		if($(this).val()=="") {
			$(this).parent().children("span").fadeIn();
		} else {
			$(this).parent().children("span").fadeOut();
		}
	});
});
</script>
</head>
<body>
	<section class="content">
		<header class="pagetitle">Signup</header>
		
		<form method="POST" action="create_account.php">
		<section class="formfield">
			<label>Username</label>
			<input type="text" name="username"/>
			<span class="error">error</span>
		</section>
		
		<section class="formfield">
			<label>Password</label>
			<input type="password" name="password" />
			<span class="error">error</span>
		</section>
		<section class="formfield">	
			<label>Re-Type Password</label>
			<input type="password" name="retypepassword" />
			<span class="error">error</span>
		</section>
		
		<section class="formfield">
			<label>email</label>
			<input type="email" name="email" />
			<span class="error">error</span>
		</section>
		
		<section class="formfield">
			<label>First Name</label>
			<input type="text" name="firstname" />
			<span class="error">error</span>
		</section>
		
		<section class="formfield">
			<label>Last Name</label>
			<input type="text" name="lastname" />
			<span class="error">error</span>
		</section>
		
		<section class="formfield">
			<input type="submit" value="signup" />
		</section>
		</form>
	</section>
</body>
</html>

